﻿@using eDirectory.Common.Dto.Address
@using eDirectory.Common.Dto.Customer
@model eDirectory.Mvc.Models.CustomerModel

@{
    ViewBag.Title = "eDirectory - Customer";
}

<h2>eDirectory - Customer</h2>
@(Html.Telerik().Grid<CustomerDto>()
        .Name("Grid")
        .DataKeys(keys => keys.Add(c => c.Id).RouteKey("Id"))
        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text).ImageHtmlAttributes(new { style = "margin-left:0" }))
        .DataBinding(dataBinding => dataBinding.Ajax() //dataBinding.Server()
                    .Select("SelectAjax", "Customer")
                    .Insert("InsertAjax", "Customer")
                    .Update("SaveAjax", "Customer")
                    .Delete("Delete", "Customer"))
        .Columns(columns =>
        {
            columns.Bound(c => c.FirstName).Width(210);
            columns.Bound(c => c.LastName).Width(210);
            columns.Bound(c => c.Telephone).Width(130);
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(GridButtonType.Text);
                commands.Delete().ButtonType(GridButtonType.Text);
            }).Width(180).Title("Commands");
        })
        //.ClientEvents(events => events.OnRowDataBound("customers_onRowDataBound"))
        .DetailView(details => details.ClientTemplate(
                Html.Telerik().Grid<AddressDto>()
                    .Name("Address_<#= Id #>")
                    .DataKeys(keys => keys.Add(c => c.Id))
                    .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text).ImageHtmlAttributes(new { style = "margin-left:0" }))
                    .Columns(columns =>
                                 {
                                     columns.Bound(c => c.Street).Width(210);
                                     columns.Bound(c => c.City).Width(210);
                                     columns.Bound(c => c.Country).Width(210);
                                     columns.Bound(c => c.PostCode).Width(120);
                                     columns.Command(commands =>
                                     {
                                         commands.Edit().ButtonType(GridButtonType.Text);
                                         commands.Delete().ButtonType(GridButtonType.Text);
                                     }).Width(180).Title("Commands");  
                                 })
                        .DataBinding(dataBinding => dataBinding.Ajax() //dataBinding.Server()
                        .Select("SelectAddressesAjax", "Customer", new {customerId = "<#= Id #>"})
                        .Insert("InsertAddressAjax", "Customer", new { customerId = "<#= Id #>" })
                        .Update("SaveAddressAjax", "Customer")
                        .Delete("Delete", "Customer"))
                                 
                .ToHtmlString()
            ))
       
        .Editable(editing => editing.Mode(GridEditMode.PopUp))
        .Pageable()
        .Sortable()
      )
      
<div id="errorSection"/>

@{Html.RenderPartial("EventLog");}
      
<script type="text/javascript">


    $(document).ready(function () {
        $("#errorSection").ajaxComplete(function (event, request, settings) {
            //$(this).html("<li>Request Complete.</li>");
            if (request) {
                var header = request.getResponseHeader("Warning");
                if (header == null | header == "") return;
                $console.log(header);
            }
        });
    });
    

    $("#errorSection").ajaxSend(function (event, request, settings) {
        $(this).append("<li>Request Sent.</li>");
    });

    function expandFirstRow(grid, row) {
        if (grid.$rows().index(row) == 0) {
            grid.expandRow(row);
        }
    }

    function customers_onRowDataBound(e) {
        var grid = $(this).data('tGrid');
        expandFirstRow(grid, e.row);
    }

    function orders_onRowDataBound(e) {
        var grid = $(this).data('tGrid');
        expandFirstRow(grid, e.row);
    }
    
</script> 